<template>
  <div>
    <h3>门店列表</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>序号</td>
          <td>门店名称</td>
          <td>分店名称</td>
          <td>门店图片</td>
          <td>门店状态</td>
          <td>开业时间</td>
          <td>门店地址</td>
          <td>门店类型</td>
          <td>特色</td>
          <td>电话</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.shopName }}</td>
          <td>{{ item.branchName }}</td>
          <td>
            <img :src="item.photo" width="50" height="50" />
          </td>
          <td>{{ item.state == true ? '开启' : '禁用' }}</td>
          <td>{{ moment(item.openTime).format('YYYY-MM-DD') }}</td>
          <td>{{ item.addressName }}</td>
          <td>{{ item.shopType }}</td>
          <td>{{ item.teSe }}</td>
          <td>{{ item.tel }}</td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <!-- 显示部分 -->
      <span>总{{ data.totalCount }}条</span>
      <span>每页{{ info.pageSize }}条</span>
      <span>共{{ info.pageIndex }}/{{ data.totalPage }}页</span>

      <!-- 改变页码 -->
      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />
      <input
        type="button"
        :value="item"
        v-for="item in data.totalPage"
        @click="goPage(item)"
      />
      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input type="button" value="跳转" @click="goPage(info.pageIndex)" />

      <!-- 改变页容量 -->

      <select v-model="info.pageSize" @change="getShopList">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

//向后端传递的参数(查询条件)
let info: any = reactive({
  pageIndex: 1, //页码
  pageSize: 2, //页容量
});

//接受后端返回的数据
let data: any = reactive({
  list: [], //列表数据
  totalCount: 0, //总条数
  totalPage: 0, //总页数
});

let arr = ref([2, 3, 4, 5, 6]);

//挂载阶段 相当于文档就绪函数
onMounted(() => {
  getShopList();
});

//分页
const goPage = (num: any) => {
  if (num < 1) {
    info.pageIndex = 1;
    return;
  }

  if (num > data.totalPage) {
    info.pageIndex = data.totalPage;
    return;
  }

  info.pageIndex = num;
  getShopList();
};

//获取门店列表
const getShopList = () => {
  axios({
    url: '/api/Shops/GetShopListNew', //404
    method: 'get', //405
    params: info, //415
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
span {
  margin: 0 5px;
}
</style>
